<template>
	<view class="control">
		<view>
			<view class="item" v-for="(item , index) in venuelist" :key="index">
				<view class="top">
					<view class="header flex-between">
						<view class="flex-align">
							<!-- <view class="name">苏州市体育中心</view> -->
						</view>
						<view class="flex-align">
							<!-- <view class="new" v-if="item.isread == 0"></view> -->
							<view class="timer">
								{{item.date}}
							</view>
						</view>
					</view>
					<view class="con">
						<view class="notice-title">{{item.name}}</view>
						<view class="detail">
							{{item.simpleContent}}
						</view>
					</view>
				</view>
				<view class="bottom flex-between" @click="openDetail(item)">
					<view class="info">查看详情</view>
					<u-icon name="arrow-right" color="#e4e4e4" size="18"></u-icon>
				</view>
			</view>
		</view>
		<view v-if="gonggao"
			style="width: 100%; min-height: 100%;background-color:rgba(0, 0, 0, 0.6);  position: fixed;top:0;left:0;z-index: 999999999;">
		</view>
		<view v-if="gonggao" :style="{ background: `url(${beijing}) left top/100% 100% no-repeat` }" style="width: 80%; min-height: 1000rpx;
				background-size: 100% 100%;position: fixed;top:200rpx;left:10%;z-index: 10000000000;">
			<view class="" style="color: #FFFFFF;text-align: center;margin-top: 20rpx;">
				<!-- {{homeData.name}} -->
			</view>
			<scroll-view scroll-y
				style="width: 100%;height: 740rpx;padding: 35rpx 35rpx 20rpx 35rpx;margin-top: 140rpx;">
				<u-parse :content="content"></u-parse>
			</scroll-view>
			<view class="" style="display: flex;justify-content: center;align-items: center;">
				<view @click="offxieyi" style="width: 380rpx; height: 80rpx;background-image: url('https://oss.szsportscenter.cn/img/zhidaol.png');
				background-size: 100% 100%;text-align: center;line-height: 80rpx;color: #fff;margin-bottom: 45rpx;">
					知道了
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const index = require('@/api/index/index.js')
	export default {
		data() {
			return {
				venuelist: [],
				gonggao: false,
				beijing: '',
				content: ``,
			}
		},
		onLoad() {},
		onShow() {
			let that = this
			that.venueTrends()
			that.getAppletConfig()
		},
		methods: {
			async getAppletConfig() {
				let that = this;
				let data = {
					weixinAppId: this.$https.weixinAppId,
					projectId: getApp().globalData.projectId,
				};
				let result = await index.index(data);
				if (result.code == 1) {
					that.beijing = result.data.index_dialog.background
				}
			},
			async venueTrends() {
				let that = this
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					id: ''
				}
				let result = await index.venueTrends(data)
				if (result.code == 1) {
					this.venuelist = result.data.result
				}
			},
			async openDetail(item) {
				// uni.navigateTo({
				// 	url: '/pages_other/notice/noticeDetail?id=' + item.id
				// })
				let that = this
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					id: item.id
				}
				let result = await index.trendsDetail(data)
				if (result.code == 1) {
					this.gonggao = true
					this.content = result.data.result
				}
			},
			offxieyi() {
				this.gonggao = false
				this.content = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		min-height: 100vh;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		background-color: #f3f3f3;

		.item {
			background-color: #ffffff;
			border-radius: 15rpx;
			margin-bottom: 30rpx;

			&:last-of-type {
				margin-bottom: 0;
			}

			.top {
				padding: 20rpx 30rpx;
				padding-bottom: 25rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #EDF5F5;

				.header {
					margin-bottom: 20rpx;

					.name {
						font-size: 28rpx;
					}

					.timer {
						font-size: 24rpx;
						color: #b2b2b2;
					}

					.new {
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						background-color: #f63043;
					}
				}

				.con {
					.notice-title {
						font-weight: 700;
						font-size: 28rpx;
						margin-bottom: 20rpx;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.detail {
						font-size: 26rpx;
						color: #8b8b8b;
						// width: 100%;
						// white-space: nowrap;
						// overflow: hidden;
						// text-overflow: ellipsis;
						box-sizing: border-box;
						// font-weight: 700;
						// font-size: 28rpx; /* 注意：rpx 是微信小程序等环境的单位 */
						margin-bottom: 20rpx;
						white-space: normal;
						/* 允许文本换行 */
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						/* 将元素设置为盒模型 */
						-webkit-box-orient: vertical;
						/* 设置盒模型的方向为垂直 */
						-webkit-line-clamp: 3;
						/* 限制文本显示的行数 */
						/* 移除 height: auto; 让 -webkit-line-clamp 控制高度 */
						line-height: 1.5;
						/* 设置合适的行高，确保文本正确换行和显示 */
						/* max-height 可以根据需要调整，但通常不是必需的，因为 -webkit-line-clamp 会控制高度 */
					}
				}
			}

			.bottom {
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				font-size: 28rpx;
			}
		}
	}
</style>